<template>
  <div class="pageWrapper">
    <common-header />
    <div class="user-info">
      <user-avater :avater="content.avater" :userName="content.userName" />
      <div class="content">
        <div class="name-wrap">
          <div class="name">{{ content.userName }}</div>
          <div class="time">
            {{ content.period || content.year + "年" }}
          </div>
        </div>
        <div class="info">考核单位：{{ content.deptNameTree }}</div>
        <div class="info">隶属单位：{{ content.orgNameTree || content.orgName }}</div>
      </div>
    </div>
    <div v-if="content.userId">
      <div class="card">
        <div class="title">评定等次</div>
        <div class="flex-wrap">
          <div class="label">评定等次</div>
          <div class="status">{{ levelStatus[content.judgeLevel] }}</div>
        </div>
        <div class="flex-wrap">
          <div class="label">评语</div>
          <div class="comment">{{ content.comment || "暂无" }}</div>
        </div>
      </div>
      <div class="card" v-if="isYear">
        <div class="title">平时考核结果</div>
        <div class="table" v-if="content.briefResultList.length">
          <div class="tr">
            <div class="th">考核周期</div>
            <div class="th">评定结果</div>
          </div>
          <div class="tr" v-for="(item, index) in content.briefResultList" :key="index">
            <div class="td">{{ item.period }}</div>
            <div class="td">{{ levelStatus[item.judgeLevel] }}</div>
          </div>
        </div>
        <div class="empty" v-else>暂无数据</div>
      </div>
      <div class="card" v-if="!isYear">
        <div class="title">
          <div>考核体系得分</div>
          <div>
            <span>总分：{{ content.finalPoint }} 分</span>
            <span>单位排名：{{ content.unitRank }}</span>
          </div>
        </div>
        <div class="table">
          <div class="tr">
            <div class="th">德</div>
            <div class="th">能</div>
            <div class="th">勤</div>
            <div class="th">绩</div>
            <div class="th">廉</div>
          </div>
          <div class="tr">
            <div class="td">{{ content.de }}</div>
            <div class="td">{{ content.neng }}</div>
            <div class="td">{{ content.qin }}</div>
            <div class="td">{{ content.ji }}</div>
            <div class="td">{{ content.lian }}</div>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="title">
          周期评议
        </div>
        <div class="flex-wrap" style="align-items:center">
          <div class="label">综合评分</div>
          <div class="score">
            <span class="num" v-if="content.grade">{{ content.grade }}</span>
            <span v-if="content.grade">分</span>
            <span v-else>暂无评议</span>
          </div>
        </div>
      </div>

      <div class="card" style="padding-bottom:4px" v-if="!isYear">
        <div class="title">工作记实</div>
        <div class="report-list" v-if="content.reportData.length" @click="linkRerportDetail">
          <div class="list-item" v-for="(item, index) in content.reportData" :key="index">
            <img class="icon" src="@/assets/common/text-icon.png" />
            <div class="content">
              <div class="title">{{ item.taskName }}</div>
              <div class="total">共{{ item.childData ? item.childData.length + 1 : 1 }}条工作内容</div>
            </div>
            <img class="arrow" src="@/assets/common/arrow-right-blue.png" />
          </div>
        </div>
        <div class="empty" v-else style="margin-bottom:10px">暂无数据</div>
      </div>

      <div class="card" style="padding-bottom:0" v-if="isYear">
        <div class="title">年度报告</div>
        <div class="report-content" v-if="content.yearReport">
          {{ content.yearReport.reportContent }}
        </div>
        <div class="footer" v-if="content.yearReport" @click="linkYearReport">
          <div class="footer-text">查看全部</div>
          <img class="arrow" src="@/assets/common/arrow-right-blue.png" />
        </div>
        <div class="empty" v-else style="padding-bottom:10px">暂无数据</div>
      </div>

      <div class="card">
        <div class="title">
          定性/加减分情况
        </div>
        <div v-if="content.commonRecord.length">
          <div class="point-item" v-for="(item, index) in content.commonRecord" :key="index">
            <div class="note">
              {{ item.details }}
            </div>
            <div class="score-wrap">
              <div class="label">{{ item.assessContent }}</div>
              <div class="value" :class="{ reduce: item.handleMethod == 'reduceScore' }">
                <span v-if="item.handleMethod == 'reduceScore'">-</span>
                <span v-if="item.handleMethod == 'addScore'">+</span>
                <span v-if="item.handleMethod == 'qualitative'">{{ gradeList[item.score] }}</span>
                <span v-else>{{ item.score }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="empty" v-else>暂无数据</div>
      </div>

      <div class="card" v-if="!isYear">
        <div class="title">考勤情况</div>
        <detail-table v-if="content.attendance" :content="attendance" />
        <div class="empty" v-else>暂无数据</div>
      </div>

      <div class="card" v-if="!isYear">
        <div class="title">学习情况</div>
        <detail-table v-if="content.studyQuotaList.length" :content="studyQuotaList" />
        <div class="empty" v-else>暂无数据</div>
      </div>

      <div class="card" v-if="!isYear">
        <div class="title">工作指标</div>
        <detail-table v-if="content.workQuotaList.length" :content="workQuotaList" />
        <div class="empty" v-else>暂无数据</div>
      </div>
    </div>

    <div class="link-btn btn-active" v-if="!objectionResult.length" @click="linkAdd">结果异议反馈</div>
    <div class="link-btn btn-active" v-else @click="linkResult">查看反馈结果</div>
  </div>
</template>

<script>
import { getAssessResult, getYearAssessResult } from "@/api/appraisalProcess";
import { getObjectionResultList } from "@/api/objectionHandle";
import { getDictionaryByType } from "@/api/common";
import detailTable from "./components/detail-table.vue";
import { Toast } from "vant";
export default {
  components: {
    detailTable
  },
  data() {
    return {
      title: "",
      isYear: 0,
      id: 0,
      content: {},
      levelStatus: {},
      attendance: [
        {
          label: "考勤天数",
          value: ""
        },
        {
          label: "早退",
          value: ""
        },
        {
          label: "迟到",
          value: ""
        },
        {
          label: "缺卡",
          value: ""
        },
        {
          label: "补卡次数",
          value: ""
        }
      ],
      form: {
        appraisalId: 0,
        dissentType: 1 //考核类型（1：平时考核 2：年度考核）,
      },
      workQuotaList: [],
      studyQuotaList: [],
      objectionResult: [],
      gradeList: {}
    };
  },
  created() {
    this.isYear = this.$route.query.is_year == "1" ? 1 : 0;
    this.form.appraisalId = this.$route.query.id;
    this.form.dissentType = this.isYear ? 2 : 1;
    this.id = this.$route.query.id;
    this.getLevel();
    this.initData();
    this.getObjectionResult();
  },
  methods: {
    linkAdd() {
      this.$router.push({
        path: "/appraisalResults/feedbackAdd",
        query: this.$route.query
      });
    },
    getObjectionResult() {
      getObjectionResultList(this.form).then(res => {
        if (res.data) {
          this.objectionResult = res.data.resultContentVOList;
        } else {
          this.objectionResult = [];
        }
      });
    },
    linkResult() {
      this.$router.push({
        path: "/appraisalResults/feedback",
        query: this.$route.query
      });
    },
    getLevel() {
      let type = this.isYear == "year" ? "yearAssess" : "quarterAssess";
      this.levelStatus = {};
      getDictionaryByType(type).then(res => {
        res.data.forEach(ele => {
          this.$set(this.levelStatus, ele.dictValue, ele.dictLabel);
        });
      });
      getDictionaryByType("grade").then(res => {
        this.gradeList = {};
        res.data.map(ele => {
          this.gradeList[ele.dictValue] = ele.dictLabel;
        });
      });
    },
    linkRerportDetail() {
      sessionStorage.setItem("reportList", JSON.stringify(this.content.reportData));
      this.$router.push({
        path: "/appraisalProcess/reportDetail",
        query: {
          type: this.isYear
        }
      });
    },
    linkYearReport() {
      let arr = [];
      arr.push({
        taskName: this.content.yearReport.year + "年年度报告",
        content: this.content.yearReport.reportContent,
        files: this.content.yearReport.fileVOList
      });
      sessionStorage.setItem("reportList", JSON.stringify(arr));
      this.$router.push({
        path: "/appraisalProcess/reportDetail",
        query: {
          type: this.isYear
        }
      });
    },
    linkGrade() {
      this.$router.push({
        path: "grade",
        query: this.$route.query
      });
    },
    initData() {
      let initFn = this.isYear ? getYearAssessResult : getAssessResult;
      initFn(this.id).then(res => {
        if (res.code == 200) {
          this.content = res.data;
          if (!this.isYear) {
            this.content.workQuotaList.forEach(ele => {
              this.workQuotaList.push({
                label: ele.quotaName,
                value: ele.quotaValue
              });
            });
            this.content.studyQuotaList.forEach(ele => {
              this.studyQuotaList.push({
                label: ele.quotaName,
                value: ele.quotaValue
              });
            });
            if (this.content.attendance) {
              this.attendance[0].value = this.content.attendance.attendanceDay;
              this.attendance[1].value = this.content.attendance.earlyCount;
              this.attendance[2].value = this.content.attendance.beLate;
              this.attendance[3].value = this.content.attendance.lackCount;
              this.attendance[4].value = this.content.attendance.absentCount;
            }
          }
        } else {
          setTimeout(() => {
            this.$router.back();
          }, 1000);
          Toast(res.msg);
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.pageWrapper {
  padding-bottom: 8px;
}
.point-item {
  padding-bottom: 12px;
  border-bottom: 1px solid #ebebeb;
  &:last-child {
    padding-bottom: 0;
    border: none;
  }
}
.flex-wrap {
  display: flex;
  align-items: flex-start;
  margin-top: 12px;
  line-height: 20px;
  font-size: 14px;
}
.report-content {
  line-height: 20px;
  color: #4d4d4d;
  font-size: 14px;
  padding: 6px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #ebebeb;
  height: 40px;
  align-items: center;
  margin-top: 6px;
  color: #808080;
  img {
    height: 12px;
  }
}
.user-info {
  display: flex;
  background: #fff;
  margin: 20px 16px 12px;
  border-radius: 8px;
  padding: 16px;
  .content {
    flex: 1;
    line-height: 17px;
    color: #a3a7ad;
    .name-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      .name {
        font-size: 16px;
        line-height: 22px;
        color: #333;
      }
      .time {
        color: #606266;
      }
    }
    .info {
      margin-top: 6px;
    }
  }
}
.empty {
  color: rgba(36, 46, 69, 0.3);
  font-size: 13px;
  margin-top: 6px;
  text-align: center;
}
.card {
  background: #fff;
  margin: 12px 16px;
  border-radius: 8px;
  padding: 16px;
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #000;
    font-size: 16px;
    line-height: 22px;
    span {
      margin-left: 12px;
      color: #f60e36;
      font-size: 12px;
    }
  }
  .label {
    color: #808080;
    margin-right: 12px;
  }
  .status {
    color: #f60e36;
  }
  .comment {
    flex: 1;
    color: #4d4d4d;
  }
  .table {
    margin-top: 12px;
    width: 100%;
    border: 1px solid #cad2e6;
    .tr {
      display: flex;
      > div {
        flex: 1;
        text-align: center;
        line-height: 34px;
        border-left: 1px solid #ebebeb;
        font-size: 14px;
        color: #4d4d4d;
        &:first-child {
          border-left: none;
        }
      }
      .th {
        border-bottom: 1px solid #ebebeb;
        background: #f5f8fc;
      }
      .td {
        color: #808080;
      }
    }
  }
  .score {
    display: flex;
    align-items: center;
    color: rgba(36, 46, 69, 0.3);
    .num {
      color: #f60e36;
      font-size: 20px;
      font-weight: 600;
      margin-right: 8px;
      margin-bottom: 4px;
      line-height: 20px;
    }
  }
  .report-list {
    .list-item {
      display: flex;
      align-items: center;
      padding: 0 8px;
      border-top: 1px solid #ebebeb;
      &:first-child {
        border-top: none;
      }
      .icon {
        width: 30px;
        margin-right: 12px;
      }
      .arrow {
        height: 12px;
      }
      .content {
        flex: 1;
        .title {
          font-size: 14px;
          color: #4d4d4d;
          margin-bottom: 2px;
          line-height: 20px;
        }
        .total {
          line-height: 17px;
          font-size: 12px;
          color: #b3b3b3;
        }
      }
      height: 62px;
    }
  }
  .note {
    margin-top: 12px;
    font-size: 14px;
    line-height: 22px;
    color: #4d4d4d;
    margin-bottom: 6px;
  }
  .score-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
  }
  .value {
    color: #f60e36;
  }
  .reduce {
    color: #333;
  }
}
.link-btn {
  margin: 24px 16px 40px;
  text-align: center;
  line-height: 52px;
  border-radius: 12px;
  color: #fff;
  background: #2492ff;
  font-size: 14px;
}
</style>
